<?php
session_start();

// Redirect to login page if not logged in
if (!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] !== true) {
    header('Location: index.php');
    exit;
}

// Handle form submission
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $content = $_POST['content']; // Get content from CKEditor 5
    // Process the content (e.g., save to database, display, etc.)
    echo "<h2>Submitted Content:</h2>";
    echo "<div>" . htmlspecialchars($content) . "</div>";
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <!-- Include CKEditor 5 from CDN -->
    <script src="https://cdn.ckeditor.com/ckeditor5/41.1.0/classic/ckeditor.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #fff;
            padding: 20px;
        }

        .form-container {
            max-width: 800px;
            margin: 0 auto;
        }

        .form-container h1 {
            margin-top: 0;
            font-size: 24px;
            color: #333;
        }

        .form-container #editor {
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 10px;
            font-size: 16px;
            min-height: 300px;
        }

        .form-container button {
            margin-top: 20px;
            padding: 10px 20px;
            background-color: #28a745;
            border: none;
            border-radius: 4px;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
        }

        .form-container button:hover {
            background-color: #218838;
        }
    </style>
</head>
<body>
    <div class="form-container">
        <h1>Home</h1>
        <form method="POST" action="">
            <label for="content">Enter your content:</label>
            <div id="editor"></div>
            <textarea id="content" name="content" style="display:none;"></textarea>
            <button type="submit">Submit</button>
        </form>
    </div>

    <script>
        // Initialize CKEditor 5 with image upload
        ClassicEditor
            .create(document.querySelector('#editor'), {
                // Enable the image upload plugin
                image: {
                    toolbar: ['imageTextAlternative', '|', 'imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:alignRight'],
                    styles: ['full', 'alignLeft', 'alignRight'],
                    upload: {
                        types: ['jpeg', 'png', 'gif'], // Allowed image types
                    }
                },
                // Configure the upload adapter
                simpleUpload: {
                    uploadUrl: 'upload.php', // URL to the upload script
                    withCredentials: false,
                    headers: {
                        'X-CSRF-TOKEN': 'CSRF-Token' // Add CSRF token if needed
                    }
                }
            })
            .then(editor => {
                // Update the hidden textarea with the editor's content on form submission
                editor.model.document.on('change:data', () => {
                    document.querySelector('#content').value = editor.getData();
                });
            })
            .catch(error => {
                console.error(error);
            });
    </script>
</body>
</html>